<template>
  <div class="flex min-h-screen bg-gradient-to-r from-blue-50 to-blue-100 transition-colors duration-500">
    <!-- 左侧边栏 -->
    <Sidebar
      :sessions="sessionsList"
      :currentId="currentSession.id"
      @select="selectSession"
      @add="handleAddSession"
      class="border-r border-gray-200"
    />

    <!-- 主区域 -->
    <div class="flex-1 flex flex-col h-screen overflow-hidden">
      <!-- 顶部标题栏 -->
      <ChatHeader :session="currentSession" class="shadow-sm" />

      <!-- 中部消息区 -->
      <div class="flex-1 overflow-hidden">
        <ChatMessages
          :key="currentSession.id + reloadKey"
          :sessionId="currentSession.id"
          :reloadKey="reloadKey"
          :filterKeyword="searchKeyword"
          :filterTypes="searchTypes"
          class="h-full w-full"
        />
      </div>

      <!-- 底部输入栏 -->
      <ChatInput
        :sessionId="currentSession.id"
        @sent="handleSent"
        @search="handleSearch"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { sessions, Session } from '@/utils/mockData'
import Sidebar from '@/components/Sidebar.vue'
import ChatHeader from '@/components/ChatHeader.vue'
import ChatMessages from '@/components/ChatMessages.vue'
import ChatInput from '@/components/ChatInput.vue'

// 状态
const sessionsList = sessions
const currentSession = ref<Session>(sessionsList[0])
const reloadKey = ref(0)

// 搜索状态
const searchKeyword = ref('')
const searchTypes = ref<string[]>([])

// 方法封装
function selectSession(session: Session) {
  currentSession.value = session
  reloadKey.value++
  clearSearch()
}

function handleSent() {
  reloadKey.value++
}

function handleSearch({ keyword, types }: { keyword: string; types: string[] }) {
  searchKeyword.value = keyword
  searchTypes.value = types
}

function clearSearch() {
  searchKeyword.value = ''
  searchTypes.value = []
}
function handleAddSession(name: string) {
  sessionsList.push({
    id: Date.now(),
    name,
    lastMessage: '新会话已创建',
  })
}
</script>

<style scoped>
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.fade-slide-enter-to {
  opacity: 1;
  transform: translateY(0);
}
.fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
